<template>
  <render v-bind="props"></render>
</template>
<script setup lang="ts">
import { ref, reactive, h, computed } from 'vue'
import { PARA_TYPE, ParagraphItem, setObjectProperty } from '../util'
import BImg from '../component/BImg.vue'
type PROPS = { data: ParagraphItem }
const props = withDefaults(defineProps<PROPS>(), {})
const pics = computed(() => {
  return props.data.pic?.pics.map((item) => ({
    src: item.url,
    width: item.width,
    height: item.height,
    size: item.size,
    liveSrc: item.live_url,
  }))
})
const isAlbum = computed(() => {
  return props.data.pic?.style === 1
})
const render = (props: PROPS) => {
  const picItem = pics.value?.[0]
  const { src } = picItem || {}
  const width = picItem?.width || 0
  const height = picItem?.height || 0
  const maxWidth = Math.min(596, width)
  const maxHeight = (height / width) * maxWidth
  return h(
    'div',
    {
      class: setObjectProperty(
        { 'opus-para-pic': true },
        props.data.align !== 2 ? 'center' : 'right',
        !isAlbum.value
      ),
      onClick: () => {
        console.log('预览图片')
      },
    },
    [
      isAlbum.value
        ? // 相册模式
          h('', { data: pics, end: false })
        : // 单图模式
          h(BImg, {
            style:
              maxWidth && maxHeight
                ? {
                    width: `${maxWidth}px`,
                    height: `${maxHeight}px`,
                  }
                : {
                    maxWidth: '100%',
                  },
            src: src!,
            formatOptions: { w: maxWidth, h: maxHeight },
          }),
    ]
  )
}
</script>
<style lang="scss" scoped></style>
